<div data-ng-controller="userController" data-ng-init="viewProfile()">
    <form name="registerForm" novalidate
          mi-submit="submit()">
        <div class="alert alert-danger" id="error-box" ng-show="isServerError">
            <span ng-bind="serverError"></span>
        </div>
        <div class="form-group" ng-class="{'has-error':(registerForm.username | shouldDisplayError:registerForm)}">
            <label for="username">Username</label>
                <span ng-show="!registerForm.username.$invalid && registerForm.username.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i>
                </span>
            <input type="text" class="form-control" id="username" name="username"
                   placeholder="Username" required ng-minlength="6" ng-model="newUser.username"
                   ng-pattern="/^[a-zA-Z_0-9]*$/" mi-check-unique/>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'min'">
            Your username must have more than 6 characters
        </span>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'unique'">
            Someone has used this username, please try another
        </span>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'pattern'">
            Username can not contain special characters excepts '_'
        </span>
        </div>


        <div class="form-group" ng-class="{'has-error':(registerForm.email | shouldDisplayError:registerForm)}">
            <label for="email">Email</label>
                <span ng-show="!registerForm.email.$invalid && registerForm.email.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i>
                </span>
            <input type="email" class="form-control" id="email" name="email"
                   placeholder="Email" required ng-model="newUser.email" mi-check-unique/>
        <span class="help-block" ng-show="registerForm.email | shouldDisplayError:registerForm:'email'">
            Invalid email format
        </span>
        <span class="help-block" ng-show="registerForm.email | shouldDisplayError:registerForm:'unique'">
            This email address has been used. If you forgot your account, recover it <a href="/recovery">here</a> or just <a
                href="/login">sign in</a>
        </span>
        </div>

        <div class="form-group" name="birthday"
             ng-class="{'has-error':
                 (registerForm.date | shouldDisplayError:registerForm) &&
                 (registerForm.month | shouldDisplayError:registerForm) &&
                 (registerForm.year | shouldDisplayError:registerForm)}">

            <label for="date" ng-class="{'has-error':(registerForm.date | shouldDisplayError:registerForm)}">
                <select id="date" ng-options="date for date in default.dates" name="date" class="form-control"
                        ng-model="newUser.date" mi-date-valid/>
                <option value="">-- date --</option>
                </select>
            </label>
            <label for="month" ng-class="{'has-error':(registerForm.month | shouldDisplayError:registerForm)}">
                <select id="month" ng-options="month for month in default.months" name="month" class="form-control"
                        ng-model="newUser.month" mi-date-valid/>
                <option value="">-- month --</option>
                </select>
            </label>
            <label for="year" ng-class="{'has-error':(registerForm.year | shouldDisplayError:registerForm)}">
                <select id="year" ng-options="year for year in default.years" name="year" class="form-control"
                        ng-model="newUser.year" mi-date-valid/>
                <option value="">-- year --</option>
                </select>
            </label>
        <span class="help-block" ng-show="registerForm.date | shouldDisplayError:registerForm:'datevalid'">
            Date invalid
        </span>
        </div>
        <div class="form-group">
            <label>
                <input type="radio" name="gender" value="male" class="form-control" checked ng-model="newUser.gender"/>Male
            </label>
            <label>
                <input type="radio" name="gender" value="female" class="form-control" ng-model="newUser.gender"/>Female
            </label>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>


<!--<form data-ng-submit="updateProfile()" data-ng-init="viewProfile()">-->
<!--<table>-->
<!--<tbody>-->
<!--<tr>-->
<!--<th>First Name</th>-->
<!--<td><input type="text" name="firstName"  data-ng-model="user.firstName" value="{{user.firstName}}" /></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>Last Name</th>-->
<!--<td><input type="text" name="lastName"  data-ng-model="user.lastName"  value="{{user.lastName}}" /></td>-->
<!--</tr>-->
<!--<div class="form-group" name="birthday"-->
<!--ng-class="{'has-error':-->
<!--(registerForm.date | shouldDisplayError:registerForm) &&-->
<!--(registerForm.month | shouldDisplayError:registerForm) &&-->
<!--(registerForm.year | shouldDisplayError:registerForm)}">-->

<!--<label for="date" ng-class="{'has-error':(registerForm.date | shouldDisplayError:registerForm)}">-->
<!--<select id="date" ng-options="date for date in default.dates" name="date" class="form-control" ng-model="newUser.date" mi-date-valid/>-->
<!--<option value="">-- date --</option>-->
<!--</select>-->
<!--</label>-->
<!--<label for="month" ng-class="{'has-error':(registerForm.month | shouldDisplayError:registerForm)}">-->
<!--<select id="month" ng-options="month for month in default.months" name="month" class="form-control" ng-model="newUser.month" mi-date-valid/>-->
<!--<option value="">-- month --</option>-->
<!--</select>-->
<!--</label>-->
<!--<label for="year" ng-class="{'has-error':(registerForm.year | shouldDisplayError:registerForm)}">-->
<!--<select id="year" ng-options="year for year in default.years" name="year" class="form-control" ng-model="newUser.year" mi-date-valid/>-->
<!--<option value="">-- year --</option>-->
<!--</select>-->
<!--</label>-->
<!--<span class="help-block" ng-show="registerForm.date | shouldDisplayError:registerForm:'datevalid'">-->
<!--Date invalid-->
<!--</span>-->
<!--</div>-->
<!--<tr>-->
<!--<th>Email</th>-->
<!--<td><input type="text" name="email"  data-ng-model="user.email" value="{{user.email}}"/></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>Gender</th>-->
<!--<td><input type="radio" name="gender"  data-ng-model ="user.gender" value="male"/> Male-->
<!--<input type="radio" name="gender"  data-ng-model ="user.gender" value="female"/> Female-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--<input type="submit" value="Edit"/>-->
<!--</form>-->
